<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>BFC</title>
        <style type="text/css">
            h3 { text-align: center; }
           .container {
                width: 80vw;
                border: 1px solid blue;
                margin: auto;
            }

           .parent {
                overflow: auto;
                margin: 25px;
                background: #dfdfdf;
            }

           .child {
                height: 50px;
                margin: 20px 0;
            }

           .child:nth-child(2n) {
                background: rgb(255, 214, 255);
            }

           .child:nth-child(2n+1) {
                background: gold;
            }
        </style>
    </head>

    <body>
        <h3>用BFC解决外边距重叠问题</h3>
        <div class="container">
            <div class="parent">
                <div class="child">
                    首个子元素顶部外边距与父元素顶部外边距默认重叠的
                </div>
                <div class="child"></div>
                <div class="child"></div>
                <div class="child">
                    末尾子元素底部外边距与父元素底部外边距默认重叠的
                </div>
            </div>
        </div>
    </body>
</html>